<template>
  <Cascader :data="areaData" v-model="targetValue" :placeholder="placeholder" :load-data="loadAreaData"
            :disabled="disabled"
            @on-change="changeCascader"
  />
</template>

<script>
  import {ProvinceData, CityData, CountyData} from '../../common/data/area/area'

  export default {
    name: "areaCascader",
    props: {
      value: Array,
      target: {
        type: String,
        default: 'county'//province,city
      }, placeholder: {
        type: String,
        default: '请选择地区'
      }, disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        areaData: [...ProvinceData],
        targetValue: []
      }
    },
    watch: {
      value(cur) {
        this.targetValue = cur
      }, targetValue(cur) {
        this.$emit('input', cur)
      }
    },
    components: {},
    computed: {},
    methods: {
      // 级联选择发生改变时
      changeCascader(val, selectedData) {
        let arr = selectedData.map(data => {
          return data.label
        })
        this.$emit('on-change', arr)
      },
      // 加载级联
      loadAreaData(item, callback) {
        item.loading = true;
        switch (item.target) {
          case "province":
            item.children = [...CityData[item.value]]
            if (this.target !== 'city') {
              item.children.map(item => {
                item.children = []
                item.target = 'city'
                item.loading = false
              })
            }
            break
          case "city":
            item.children = [...CountyData[item.value]]
            break
        }
        item.loading = false;
        callback()
      }
    },
    created() {

    },
    mounted() {
      if (this.target !== 'province') {
        this.areaData.map(item => {
          item.children = []
          item.target = 'province'
          item.loading = false
        })
      }
      if (!this.isEmptyObject(this.value))
        this.targetValue = this.value
    }
  }
</script>

<style scoped lang="less">

</style>
